<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Glide-Scroll Vertically OnClick</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/glide-scroll-rel-v.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_glidescroll.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1', null);
  
  // pass id's of any wndo's that scroll inside tables
  // i.e., if you have 3 (with id's wn1, wn2, wn3): dw_scrollObj.GeckoTableBugFix('wn1', 'wn2', 'wn3');
  dw_scrollObj.GeckoTableBugFix('wn'); 
}

</script>	
</head>
<body onload="initScrollLayer()">

<table class="main" cellspacing="0" cellpadding="8" border="0">
	<tr>
	  <th colspan="3">Scroll with a Gliding Motion OnClick</th>
	</tr>
	<tr>
    <td class="text">
      <p>This example positions the scrolling layers in a cell of a centered table.</p>
      <p>The glide-scroll code supports scrollbars, <a href="glide-scroll-h.html">horizontal scrolling</a>, and gliding to <a href="glide-grid.html">specific images</a>.</p>
    </td>
	  <td>
<!-- relative positioned layer that contains scrolling layers -->		
<div id="hold">
<div id="wn"> 
  <!-- scrolling layer here -->
	<div id="lyr1" class="content">
  <!-- The images here are different sizes, so td height is set (in style sheet) to equalize those differences. 
  The table cell height is set equal to the scroll distance per click.   -->
		<table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td><img src="images/heron.gif" width="100" height="100" alt="" /></td>
     </tr>
     <tr>
      <td><img src="images/eagle.gif" width="100" height="100" alt="" /></td>
     </tr>
     <tr>
      <td><img src="images/wader.gif" width="100" height="100" alt="" /></td>
     </tr>
     <tr>
      <td><img src="images/balloon.gif" width="106" height="131" alt="" /></td>
     </tr>
     <tr>
      <td><img src="images/smile.gif" width="88" height="88" alt="" /></td>
     </tr>
    </table>
	</div>  <!-- end scrolling layer -->
	
</div>  <!-- end wn  -->
</div>	<!-- end hold (relative layer) -->	
		</td>
		<td>
<table class="scrollLinks" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- dw_scrollObj.scrollBy arguments: scroll area id (this is also first argument to constructor), 
     amount to scroll onclick on x, y axes, (optional, not included here) duration of glide -->
	<td valign="top"><a href="javascript:;" onclick="dw_scrollObj.scrollBy('wn',0,140); return false" title="Click to scroll"><img src="images/aro-up.gif" width="11" height="18" alt="" /></a></td>
</tr>
<tr>
	<td class="spacer"> </td>
</tr>
<tr>
	<td valign="bottom"><a href="javascript:;" onclick="dw_scrollObj.scrollBy('wn',0,-140); return false" title="Click to scroll"><img src="images/aro-dn.gif" width="11" height="18" alt="" /></a></td>
</tr>
</table>
		
		</td>
	</tr>
	<tr>
		<td class="text"><a href="http://www.dyn-web.com">www.dyn-web.com</a></td>
		<td>&nbsp;</td>
    <td>&nbsp;</td>
 </tr>
</table>


</body>
</html>
